<!-- excel文件导入组件 -->
<template>
  <div>
    <Upload action="//" :before-upload="handleUpload">
      <Button icon="ios-cloud-upload-outline" :loading="loadingStatus">表格导入</Button>
    </Upload>
  </div>
</template>

<script>
import XLSX from 'xlsx'

export default {
  name: 'import-excel',

  props: {
    // 标题字段
    header: {
      type: Array,
      default: () => ['num', 'name', 'tel', 'address'],
    },
    // 支持的文件格式
    format: {
      type: Array,
      default: () => ['xls', 'xlsx'],
    },
    RAS: FileReader.prototype.readAsBinaryString, // flag-浏览器是否支持readAsBinaryString
  },

  data() {
    return {
      loadingStatus: false,
      wb: null, // 工作簿，workbook
    }
  },

  methods: {
    // 处理文件上传
    handleUpload(file) {
      if (!this.validateFormat(file.name)) return false // 验证格式

      // 初始化状态
      this.loadingStatus = true
      this.$emit('startImport')

      var reader = new FileReader()

      const $t = this

      reader.onload = function(e) {
        var data = e.target.result

        if ($t.RAS) {
          $t.wb = XLSX.read(data, {
            type: 'binary',
          })
        } else {
          $t.wb = XLSX.read($t.fixdata(data), {
            type: 'binary',
          })
        }

        // 读取每个sheet的数据
        const jsons = []
        for (const sheetName of $t.wb.SheetNames) {
          const json = XLSX.utils.sheet_to_json($t.wb.Sheets[sheetName], {
            header: $t.header,
          })
          jsons.push(json)
        }

        // 处理读取后的json数据
        const objData = $t.analyzeData(jsons)

        // 结束状态
        $t.loadingStatus = false
        console.log(objData) // eslint-disable-line

        $t.$emit('finishImport', objData)
      }
      if (this.RAS) reader.readAsBinaryString(file)
      else reader.readAsArrayBuffer(file)

      return false
    },

    // 此处可以解析导入数据
    analyzeData(data) {
      // 去除每个sheet的前两行
      for (const index in data) {
        data[index] = data[index].slice(2)
      }
      return data
    },

    // 验证格式
    validateFormat(name) {
      const ext = name.split('.')[1]
      if (ext && this.format.includes(ext)) return true
      else {
        this.$Notice.warning({
          title: '文件格式错误',
          desc: `${name}文件格式错误，只支持${this.format.join(',')}！`,
        })
        return false
      }
    },

    // 文件流转BinaryString
    fixdata(data) {
      var o = ''
      var l = 0
      var w = 10240
      for (; l < data.byteLength / w; ++l) {
        o += String.fromCharCode.apply(
          null,
          new Uint8Array(data.slice(l * w, l * w + w))
        )
      }
      o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)))
      return o
    },
  },
}
</script>

<style lang='less' scoped>
</style>
